<template>
  <view class="block-btn-normal-comp" @click="$emit('click')">
    <view class="btn-inner">
      <view class="coupon-info-box" v-if="priceInfo.hasCoupon">券后</view>
      <view class="unit-box">¥</view>
      <view class="num-box">{{priceInfo.price || ''}}</view>
      <view class="text-box">解锁报告</view>
    </view>
    
    <template>
      <view v-if="styleType == 2" class="abs-price-tip" :style="{'background-image':`url(${staticImgs.tipBg})`}">
        <view  class="clock-icon"><u-icon color="#fff" size="25rpx" name="clock"></u-icon></view>
        限时福利
      </view>
      <view v-else-if="styleType == 3" class="abs-price-tip-2" :style="{'background-image':`url(${staticImgs.tipBg2})`}">
        限时特价
      </view>
      <view v-else-if="styleType == 4" class="abs-price-tip-2" :style="{'background-image':`url(${staticImgs.tipBg3})`}">
        {{priceInfo.discount || 8}}折福利
      </view>
    </template>
    
    
  </view>
</template>

<script>
  export default {
    props:{
      priceInfo:{
        type:Object,
        default:{}
      },
      styleType:{
        type:[String,Number],
        default:'1' //1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
      },
    },
    data(){
      return{
        staticImgs:{
          tipBg: this.imgBaseURL + '/scl/ad/normal/tip-bg.png',
          tipBg2: this.imgBaseURL + '/scl/ad/normal/tip-bg-v2.png',
          tipBg3: this.imgBaseURL + '/scl/ad/normal/tip-bg-v3.png',
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .block-btn-normal-comp {
    width: 522rpx;
    height: 80rpx;
    
    margin: auto;
    align-items: center;
    
    background: linear-gradient(180deg, #A7AAFF 0%, #6783FF 100%);
    border-radius: 40rpx;

    display: flex;
    justify-content: center;

    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    margin-top: 16rpx;

    font-style: normal;
    position: relative;

    .abs-price-tip {
      width: 186rpx;
      height: 72rpx;
      background-repeat: no-repeat;
      background-size: 100%;
      display: flex;
      justify-content: center;

      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
      line-height: 37rpx;
      text-align: center;
      font-style: normal;
      padding-top: 8rpx;

      position: absolute;
      right: 4rpx;
      bottom: 50rpx;

      .clock-icon {
        padding-top: 8rpx;
        margin-right: 8rpx;
      }
    }
    
    .abs-price-tip-2 {
      width: 156rpx;
      height: 72rpx;
      background-repeat: no-repeat;
      background-size: 100%;
      display: flex;
      justify-content: center;
    
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
      line-height: 37rpx;
      text-align: center;
      font-style: normal;
      padding-top: 8rpx;
    
      position: absolute;
      right: 4rpx;
      bottom: 50rpx;
    
      .clock-icon {
        padding-top: 8rpx;
        margin-right: 8rpx;
      }
    }
    

    .btn-inner {
      display: flex;
      align-items: flex-end;
      height: 60rpx;

      .coupon-info-box {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        padding-bottom: 6rpx;
        margin-right: 8rpx;
      }
    }

    .unit-box {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #FFFFFF;
      // line-height: 37rpx;
      text-align: center;
      font-style: normal;

      padding-bottom: 4rpx;
    }

    .num-box {
      font-family: HelveticaNeue, HelveticaNeue;
      font-weight: 500;
      font-size: 50rpx;
      color: #FFFFFF;
      // line-height: 61rpx;
      text-align: center;
      font-style: normal;
    }

    .text-box {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #FFFFFF;
      // line-height: 42rpx;
      text-align: center;
      font-style: normal;
      padding-bottom: 6rpx;
      margin-left: 10rpx;
    }
  }
</style>